<template>
  <!-- 筛选区 -->
  <div class="sub-filter" v-if="conditions.length && brands.length && !loading">
    <!-- 品牌条件 -->
    <div class="item">
      <div class="head">品牌：</div>
      <div class="body">
        <a
          @click="selectedBrand = item.id"
          :class="{ active: selectedBrand === item.id }"
          href="javascript:;"
          v-for="item in brands"
          :key="item.id"
          >{{ item.name }}</a
        >
      </div>
    </div>
    <!-- 规格条件 -->
    <div class="item" v-for="item in conditions" :key="item.id">
      <div class="head">{{ item.name }}：</div>
      <div class="body">
        <a
          @click="item.selectedProp = tag.id"
          :class="{ active: item.selectedProp === tag.id }"
          href="javascript:;"
          v-for="tag in item.properties"
          :key="tag.id"
          >{{ tag.name }}</a
        >
      </div>
    </div>
  </div>
  <div v-else class="sub-filter">
    <XtxSkeleton class="item" width="800px" height="40px" />
    <XtxSkeleton class="item" width="800px" height="40px" />
    <XtxSkeleton class="item" width="600px" height="40px" />
    <XtxSkeleton class="item" width="600px" height="40px" />
    <XtxSkeleton class="item" width="600px" height="40px" />
  </div>
</template>
<script>
import { findSubCategoryFilter } from '@/api/category.js'
import { useRoute } from 'vue-router'
import { watch, ref } from 'vue'

export default {
  name: 'SubFilter',
  setup(props, { emit }) {
    const route = useRoute()
    const conditions = ref([])
    const brands = ref([])
    const loading = ref(false)
    const selectedBrand = ref(null)
    // 动态路由组件默认是缓存的
    watch(
      () => route.params.id,
      newVal => {
        // 仅仅监听二级分类的id
        if (route.fullPath !== `/category/sub/${route.params.id}`) return
        // 接口正在调用，此时应该显示骨架屏
        loading.value = true
        findSubCategoryFilter(newVal).then(ret => {
          // 给每一种规格的左侧添加【全部】
          ret.result.saleProperties.forEach(item => {
            // 记录每一种规格选中的值
            item.selectedProp = null
            item.properties.unshift({
              id: null,
              name: '全部'
            })
          })
          conditions.value = ret.result.saleProperties
          // 记录品牌的选中状态
          // ret.result.brands.selectedBrand = null
          // 给品牌的左侧添加【全部】
          ret.result.brands.unshift({
            id: null,
            name: '全部'
          })
          brands.value = ret.result.brands
          // 接口调用成功后，隐藏骨架屏
          loading.value = false
        })
      },
      {
        immediate: true
      }
    )
    watch(
      [conditions, selectedBrand],
      newVal => {
        const attrs = []
        conditions.value.forEach(item => {
          console.log(item)
          const tagInfo = item.properties.find(tag => tag.id === item.selectedProp)
          attrs.push({
            groupName: item.name,
            propertyName: tagInfo.name
          })
          emit('update-filter', {
            brandId: selectedBrand.value,
            attrs: attrs
          })
        })
      },
      {
        deep: true
      }
    )
    return { conditions, brands, loading, selectedBrand }
  }
}
</script>
<style scoped lang="less">
// 筛选区
.sub-filter {
  background: #fff;
  padding: 25px;
  .item {
    display: flex;
    line-height: 40px;
    .head {
      width: 80px;
      color: #999;
    }
    .body {
      flex: 1;
      a {
        margin-right: 36px;
        transition: all 0.3s;
        display: inline-block;
        &.active,
        &:hover {
          color: @xtxColor;
        }
      }
    }
  }
}
.xtx-skeleton {
  padding: 10px 0;
}
</style>
